<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <#include "../common/header.ftl"/>
    <link rel="stylesheet" href="/js/plugins/treeview/bootstrap-treeview.min.css">
    <script type="text/javascript" src="/js/plugins/treeview/bootstrap-treeview.min.js"></script>
<script>
    $(function () {
        //默认发送请求去查根地区
        $.get("/region/selectByParentId.do",{type:"tree"},function (data) {
            //treeview树状查询
            $('#treeview').treeview({
                data:[{text: '全部地区',nodes: data}],
                showTags:true,//开启标签显示
                lazyLoad:function (node) {//none该函数的一个参数就是点击的第一个节点
                    //点击+号就发送请求去查询子地区 \
                    $.get("/region/selectByParentId.do",{parentId:node.id,type:"tree"},function (data) {
                        //将子地区添加到点击的节点下
                        $('#treeview').treeview('addNode', [ data, node ]);
                    });

                },
                onNodeSelected: function(event, node) {
                    $.get("/region/selectByParentId.do",{parentId:node.id},function (data) {
                        console.log(data);
                        //清空上一次请求拼接好的数据
                        $(".regionTable tbody").empty();
                        // var temp="";
                        $.each(data,function (index,ele) {
                           // temp += "<tr><td>"+(index+1)+"</td><td>"+ele.name+"</td></tr>";
                            //拷贝模板
                            var tr = $("#template tr").clone(true);//深度克隆
                            //填充数据
                            $(tr).find("td:nth-child(1)").html(index+1);
                            $(tr).find("td:nth-child(2)").html(ele.name);
                            $(tr).find("a").attr("data-json",ele.json);
                            //判断状态是否为1 设置按钮为取消推荐
                            if(ele.state==1){
                                $(tr).find("a.changeStateBtn").html("<span class='glyphicon glyphicon-trash'></span>取消推荐");
                            }


                            $(".regionTable tbody").append(tr);
                        });
                        //添加到表格的body中
                       // $(".regionTable tbody").html(temp);

                    });
                }
            });

            //新增和编辑
            $(".btn-input").click(function () {
                //1.清空模态框中的数据
                $("#editForm input").val("");
                //2.data方法就是取自定义属性的值 参数只要写data-后面的属性
                var json = $(this).data("json")
                console.log(json);
                //3.编辑时才有json对象
                if (json) {

                     $("#editForm input[name='id']").val(json.id);
                     $("#editForm input[name='name']").val(json.name);
                     $("#editForm input[name='parent.id']").val(json.parentId);
                     $("#editForm input[name='parentName']").val(json.parentName);

                 }else{
                    var selected=$("#treeview").treeview("getSelected");
                    console.log(selected);
                    if(selected.length>0){
                        $("#editForm input[name='parent.id']").val(selected[0].id);
                       $("#editForm input[name='parentName']").val(selected[0].text);
                    }

                }



                 //4.显示模态框
                 $("#inputModal").modal("show");

                //5.点击保存时 ajax提交请求
                $(".btn-submit").click(function () {
                    $("#editForm").ajaxSubmit(function (data) {
                        $.messager.alert("温馨提示", "1.5秒后刷新");
                        setTimeout(function () {
                            window.location.reload();
                        }, 1500);
                    });
                });

            });


            //给设为推荐绑定点击事件
            $(".btn-hot").click(function () {
                //或去json数据
                var json = $(this).data("json")

                var state=1;
                if(json.state==1){
                    state=0;
                }
                $.messager.confirm("温馨提示","确定要修改吗",function () {
                    $.get("/region/changeState.do",{id:json.id,state:state},function (data) {
                        if(data.success){
                            reload();
                        }
                    });
                })

            });






        });








    });
</script>

</head>
<body>

<#--准备一个模板-->
<table id="template" style="display: none">
    <tr>
        <td></td>
        <td></td>
        <td>
            <a class="btn btn-info btn-xs btn-input" >
                <span class="glyphicon glyphicon-pencil"></span>编辑
            </a>

            <a class="btn btn-danger btn-xs btn-hot changeStateBtn" >
                <span class="glyphicon glyphicon-trash"></span>设为推荐
            </a>
        </td>
    </tr>
</table>

<div class="container " style="margin-top: 20px">
   <#include "../common/top.ftl"/>
    <div class="row">
        <div class="col-sm-3">
            <#assign currentMenu="region"/>
            <#include "../common/menu.ftl"/>
        </div>
        <div class="col-sm-9">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class="page-head-line">地区管理</h1>
                </div>
            </div>
            <!--高级查询--->
            <form class="form-inline" id="searchForm" action="/region/list.do" method="post">
                <input type="hidden" name="currentPage" id="currentPage" value="1">
                <a class="btn btn-success btn-input" role="button" >
                    <span class="glyphicon glyphicon-plus" ></span> 添加
                </a>
            </form>

            <#--地区目录和明细-->
            <div class="row">
                <div class="col-md-4">

                        <div id="treeview"></div>
                </div>
                <div class="col-md-8">
                    <table class="table table-striped table-hover regionTable">
                        <thead>
                        <tr>
                            <th>编号</th>
                            <th>名称</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>

                    </table>
                </div>
            </div>

        </div>

    </div>
</div>



<!-- 模态框（Modal） -->
<div class="modal fade" id="inputModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">编辑</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="/region/saveOrUpdate.do" method="post" id="editForm">
                    <input type="hidden" name="id">
                    <div class="form-group">
                        <label for="name" class="col-sm-4 control-label">名称：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="name" name="name"
                                   placeholder="请输入地区名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="sn" class="col-sm-4 control-label">上级地区：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="parentName" name="parentName" readonly>
                            <input type="hidden" class="form-control" id="parentId" name="parent.id" >
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary btn-submit">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->





</body>
</html>